import React from 'react';
import { View, StyleSheet, ScrollView } from 'react-native';
import { 
  ResponsiveContainer,
  ResponsiveText,
  scale,
  Sizes
} from '../components';

const HomeScreen = () => {
  return (
    <ResponsiveContainer>
      <ScrollView style={styles.container}>
        <View style={styles.bannerContainer}>
          <View style={styles.banner} />
        </View>
        
        <View style={styles.section}>
          <ResponsiveText variant="large" weight="bold" style={styles.sectionTitle}>热门商品</ResponsiveText>
          <View style={styles.productList}>
            <View style={styles.productItem}>
              <View style={styles.productImage} />
              <ResponsiveText style={styles.productName}>商品1</ResponsiveText>
              <ResponsiveText style={styles.productPrice}>¥99.00</ResponsiveText>
            </View>
            <View style={styles.productItem}>
              <View style={styles.productImage} />
              <ResponsiveText style={styles.productName}>商品2</ResponsiveText>
              <ResponsiveText style={styles.productPrice}>¥199.00</ResponsiveText>
            </View>
            <View style={styles.productItem}>
              <View style={styles.productImage} />
              <ResponsiveText style={styles.productName}>商品3</ResponsiveText>
              <ResponsiveText style={styles.productPrice}>¥299.00</ResponsiveText>
            </View>
          </View>
        </View>
        
        <View style={styles.section}>
          <ResponsiveText variant="large" weight="bold" style={styles.sectionTitle}>推荐商品</ResponsiveText>
          <View style={styles.productList}>
            <View style={styles.productItem}>
              <View style={styles.productImage} />
              <ResponsiveText style={styles.productName}>推荐商品1</ResponsiveText>
              <ResponsiveText style={styles.productPrice}>¥88.00</ResponsiveText>
            </View>
            <View style={styles.productItem}>
              <View style={styles.productImage} />
              <ResponsiveText style={styles.productName}>推荐商品2</ResponsiveText>
              <ResponsiveText style={styles.productPrice}>¥188.00</ResponsiveText>
            </View>
            <View style={styles.productItem}>
              <View style={styles.productImage} />
              <ResponsiveText style={styles.productName}>推荐商品3</ResponsiveText>
              <ResponsiveText style={styles.productPrice}>¥288.00</ResponsiveText>
            </View>
          </View>
        </View>
      </ScrollView>
    </ResponsiveContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  bannerContainer: {
    padding: Sizes.spacingMedium,
  },
  banner: {
    height: scale(150),
    backgroundColor: '#e0e0e0',
    borderRadius: Sizes.borderRadiusRegular,
  },
  section: {
    padding: Sizes.spacingMedium,
    backgroundColor: '#ffffff',
    marginBottom: Sizes.spacingRegular,
  },
  sectionTitle: {
    marginBottom: Sizes.spacingMedium,
  },
  productList: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  productItem: {
    width: '30%',
    marginBottom: Sizes.spacingMedium,
  },
  productImage: {
    width: '100%',
    height: scale(100),
    backgroundColor: '#e0e0e0',
    borderRadius: Sizes.borderRadiusSmall,
    marginBottom: Sizes.spacingSmall,
  },
  productName: {
    marginBottom: Sizes.spacingTiny,
  },
  productPrice: {
    color: '#f50',
    fontWeight: 'bold',
  },
});

export default HomeScreen; 